import { postDecisionRename, postDecisionFlowAdd } from '@/api';
import { MciButton, MciDialog, MciInput, MciNotification } from '@/components/base';
import { ElForm, ElFormItem } from 'element-plus';

export const AddDecisionLeaf = defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    parentId: {
      type: String,
      default: ''
    },
    parentName: {
      type: String,
      default: ''
    },
    flowId: {
      type: String,
      default: ''
    },
    flowName: {
      type: String,
      default: ''
    },
    flowDesc: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'refreshList'],
  setup(props, { emit }) {
    const loading = ref(false);
    const params = ref({} as any);
    const formRef = ref<InstanceType<typeof ElForm>>();
    const router = useRouter();

    params.value = {
      flowId: props.flowId,
      flowName: props.flowName,
      flowDesc: props.flowDesc
    };

    const confirmHandle = async () => {
      try {
        await formRef.value?.validate();
        loading.value = true;
        if (props.title === '新增决策') {
          const data = {
            ...params.value,
            categoryId: props.parentId
          };
          const flowInfo = await postDecisionFlowAdd(data);
          emit('refreshList');
          MciNotification.success({ title: '添加成功' });
          router.push({ name: 'DecisionFlow', query: { flowId: flowInfo.id, categoryId: flowInfo.categoryId, decisionId: flowInfo.decisionId } });
        } else {
          const data = await postDecisionRename({
            decisionId: props.flowId,
            flowName: params.value.flowName,
            flowDesc: params.value.flowDesc
          });
          if (data) {
            MciNotification.success({ title: '修改成功' });
            emit('refreshList', true);
          }
        }
      } catch (error) {
      } finally {
        loading.value = false;
      }
    };

    // watch(
    //   () => props.modelValue,
    //   (val) => {
    //     if (!val) {
    //       formRef.value?.resetFields();
    //     } else {
    //       getInitData();
    //       if (props.title === '修改目录' || props.title === '重命名') {
    //         defaultParams();
    //       }
    //     }
    //   }
    // );

    return () => (
      <>
        <MciDialog
          title={props.title}
          confirmHandle={confirmHandle}
          modelValue={true}
          width={500}
          customClass="max-height-dialog">
          {{
            default() {
              return (
                <ElForm ref={formRef} model={params.value} labelPosition="top">
                  <ElFormItem
                    label="决策名称"
                    prop="flowName"
                    rules={[
                      {
                        required: true,
                        message: `请输入决策名称`,
                        trigger: ['change', 'blur']
                      }
                    ]}>
                    <MciInput placeholder="请输入" v-model={params.value.flowName} maxlength={20} />
                  </ElFormItem>
                  <ElFormItem
                    label="决策说明"
                    prop="flowDesc"
                    rules={[
                      {
                        required: true,
                        message: `请输入决策说明`,
                        trigger: ['change', 'blur']
                      }
                    ]}>
                    <MciInput placeholder="请输入" v-model={params.value.flowDesc} type={'textarea'} maxlength={500} rows={8} />
                  </ElFormItem>
                  <ElFormItem label="隐藏" style="display: none;" prop="hidden">
                    <MciInput />
                  </ElFormItem>
                </ElForm>
              );
            },
            footer() {
              return (
                <>
                  <MciButton onClick={() => emit('update:modelValue', false)}>取消</MciButton>
                  <MciButton type="primary" onClick={confirmHandle}>
                    确定
                  </MciButton>
                </>
              );
            }
          }}
        </MciDialog>
      </>
    );
  }
});
